@import '../styles/themes/default.less';

:export {
    tabBarFontColor: @tabBarFontColor;
    primaryColor   : @primaryColor;
    iconSize       : @tabBarIconSize;
}

.MMTabBar_placeholder {
    margin-top: 20px;
    height    : 50px;
}

.MMTabBar {
    position        : fixed;
    bottom          : 0;
    left            : 0;
    width           : 100%;
    background-color: white;
    box-shadow      : @boxShadow;
}


.content {
    display        : flex;
    height         : 50px;
    flex-direction : row;
    justify-content: space-around;
}

.item {
    flex          : 1;
    margin-top    : 5px;
    position      : relative;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    font-size     : 11px;
    color         : @tabBarFontColor;
}

.image {
    width : @tabBarIconSize + 0px;
    height: @tabBarIconSize + 0px;
}

.selected {
    color: @primaryColor;
}


.redDot {
    position        : absolute;
    top             : 0;
    right           : -4px;
    border-radius   : 50%;
    width           : 8px;
    height          : 8px;
    background-color: @red;
}


.count {
    position: absolute;
    top     : 3px;
    right   : 0;
}

.iconfont {
    height     : 22px;
    line-height: 22px;
    position   : relative;
}

.text {
    margin-top : 2px;
    font-size  : 11px;
    line-height: 16px;
    height     : 16px;
}

.sopHover {
    background     : url(./images/sop-cgdd-hover.png) no-repeat center;
    background-size: 100%;
}

.sop {
    background     : url(./images/sop-cgdd.png) no-repeat center;
    background-size: 100%;
}
